<template>
  <div>
      <el-row :gutter="20">
          <el-col :span="3">
              <span v-text="unCheckedNum" ></span>
          </el-col>
          <el-col :span="3">
              <span v-text="checkedNum" ></span>
          </el-col>
             <el-col :span="3">
                 <span v-text="checked" ></span>
          </el-col>
              <el-col :span="3">
                  <span v-text="send" ></span>
          </el-col>
      </el-row><br>




          <el-row style="text-alian:center;">
          <el-col :span="6">
              
              
              <div class="grid-content"></div>
              
        </el-col>
                <el-col :span="6">
                        起始日期：<el-date-picker type="datetime"  placeholder="年/月/日" v-model="repairOrder.dealWithDate" value-format="yyyy-MM-dd HH:mm:ss" ></el-date-picker>
                </el-col>
                <el-col :span="6">
                        截至日期：<el-date-picker type="datetime"  placeholder="年/月/日" v-model="repairOrder.endDate" value-format="yyyy-MM-dd HH:mm:ss" ></el-date-picker>
                </el-col>
            <el-col :span="6">
                    <el-button type="primary" size="mini" @click="query()">查询</el-button>
                    <el-button type="primary" size="mini" @click="reset()">清空</el-button>
                    
            </el-col>
         </el-row>

        <el-row>
            <el-col :span="12">
                 <div id="left" style="width: 600px;height:400px;"></div>
            </el-col>
            <el-col :span="12">
                <div id="circular" style="width: 600px;height:400px;"></div>
            </el-col>
        </el-row>
  </div>
</template>

<script>



export default {
    
  data () {
    return {
        unCheckedNum:'未派工单  8',
        checkedNum:'已派工单  6',
        send:'已审查工单  10',
        checked:'未审查工单  16',
        //圆形图数据
        // option : {
        //         series : [
        //             {
        //                 name: '访问来源',
        //                 type: 'pie',
        //                 radius: '55%',
        //                 data:[]
        //             }
        //         ],
        //     },
            left: {
                    title: {
                    text: "派单管理",
                    },
                    tooltip: {
                    trigger: "item",
                    formatter: "{a} <br/>{b} : {c}%",
                    },
                    legend: {
                    orient: "vertical",
                    x: "right",
                    y: "top",
                    data: ["评估概率"],
                    },
                    xAxis: {
                    data: [],
                    },
                    yAxis: {},
                    series: [
                    {
                        name: "评估概率",
                        type: "bar",
                        data: [],
                        itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: "rgba(0, 0, 0, 0.5)",
                        },
                        color: function (params) {
                            // 自定义颜色
                            var colorList = ["#1ab394", "red", "#6DC8EC", "#3F8FFF"];
                            return colorList[params.dataIndex];
                        },
                        },
                    },
                    ],
                },
            option:{
                    title: {
                    text: '派单行为分析', // 主标题
                    subtext: '', // 副标题
                    x: 'right' // x轴方向对齐方式
                    },
                    grid: { containLabel: true },
                    tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {d}%'
                    },
                    // color: ['#1FC48D', '#F5A60A', '#6DC8EC', '#3F8FFF'],
                    color: ['red', '#1FC48D', '#6DC8EC', '#3F8FFF'],
                    // backgroundColor: '#ffffff',
                    legend: {
                    orient: 'vertical',
                    icon: 'circle',
                    align: 'left',
                    x: 'right',
                    y: 'bottom',
                    //data: ['未派工单', '已派工单', '未审核工单', '已审核工单']
                    data:[],
                    },
                    series: [
                    {
                        name: '派单统计',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        center: ['40%', '50%'],
                        itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        color: function (params) {
                            // 自定义颜色
                            var colorList = ['red', '#1FC48D', '#6DC8EC', '#3F8FFF']
                            return colorList[params.dataIndex]
                        }
                        },
                        data: this.opinionData2
                    }
                    ]
                },
            //圆形图的查询时间
            repairOrder:{
                dealWithDate:'',
                endDate:''
            },
        }
        
    },

    mounted:function(){
    this.exampEcharts();
    
    },
    methods:{
         exampEcharts() {
            var myChart = this.$echarts.init(document.getElementById('circular'));
            myChart.setOption(this.option);
            var left=this.$echarts.init(document.getElementById('left'));
            left.setOption(this.left);
        },
        showCircular(){
            console.log(this.repairOrder)
            this.axios.post("/repiar/circular",this.repairOrder).then(res=>{
                // this.option.series[0].data=res.data.data;
                var list=res.data.data;
                console.log(list)
                var xarry=new Array();
                var series=new Array();
                var legend=new Array();
                var spanarry=new Array();
                list.forEach((item,index,array)=>{
                    xarry.push(item.name);
                    series.push(item.value);
                    legend.push(item.name);
                    spanarry.push(item.name+'工单'+'  '+item.value)
                })
               this.unCheckedNum=spanarry[0];
               this.checkedNum=spanarry[1];
               this.send=spanarry[2];
               this.checked=spanarry[3];


                this.left.xAxis.data=xarry;
                this.left.series[0].data=series;
                this.option.legend.data=legend;
                this.option.series[0].data=list;
                

                this.exampEcharts();
            })
        },
        query(){
            this.showCircular()
        },
        reset(){
            this.repairOrder.dealWithDate=''
            this.repairOrder.endDate=''
            this.showCircular();
        }
    },
    created(){
     this.showCircular();
    },  
}
</script>

<style scoped>


.el-col-3{
    float: right;
    background: #0BAB9D;
    color: white;
    text-align: center;
    height: 50px;
}
span{
    line-height: 50px;
    font-size: 25px;
}
.grid-content {
    border-radius: 4px;
    min-height: 100px;
  }
</style>
